<template>
	<div>
		<div class="k" style="width: 100%;height: 50px;"></div>
		<div id="b" style="width: 1600px; margin-left: calc(50% - 800px);">
			<el-table :data="vip" style="1000px" height="800px">
				<el-table-column prop='vtele' label="会员电话"></el-table-column>
				<el-table-column prop='vname' label="会员姓名"></el-table-column>
				<el-table-column prop='vmoney' label="账户余额"></el-table-column>
				<el-table-column label="操作">
					<template slot-scope="owner">
						<el-button @click='rech(owner.row.vtele)'>充值</el-button>
						<el-button @click='char(owner.row.vtele)'>扣款</el-button>
						<el-button @click='del(owner.row.vtele)'>删除</el-button>
						<el-button @click='update(owner.row.vtele)'>更改手机号</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
	</div>
</template>

<script>
	export default {
		data: function() {
			return {
				vip: [],
			}
		},
		created: function() {
			this.queryvip();
		},
		methods: {
			queryvip: function() {
				this.$http.get('http://localhost:8080/OrderSystemServer/order/vip/getall')
					.then((response) => {
						console.log(response);
						this.vip = response.data.body;
					});
			},
			del: function(vtele) {
				if(confirm("确定要删除这条信息吗?")) {
					console.log(vtele)
					this.$http.get(`http://localhost:8080/OrderSystemServer/order/vip/del?vtele=${vtele}`)
						.then((response) => {
							if(response.data.isOK) {
								alert("删除成功！");
								this.queryvip();
							}
						});
				}
			},
			rech: function(vtele) {
				this.$prompt('充值金额', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
				}).then(({
					value
				}) => {
					this.$message({
						type: 'success',
						message: '充值的金额为: ' + value
					});
					this.$http.get(`http://localhost:8080/OrderSystemServer/order/vip/recharge?vtele=${vtele}&money=${value}`)
						.then((response) => {
							console.log(response);
							if(response.data.isOK) {
								this.$message({
									type: 'success',
									message: '充值成功'
								});
								this.queryvip();
							}
						});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '取消输入'
					});
				});
			},
			char: function(vtele) {
				this.$prompt('扣除金额', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
				}).then(({
					value
				}) => {
					this.$message({
						type: 'success',
						message: '扣除的金额为: ' + value
					});
					this.$http.get(`http://localhost:8080/OrderSystemServer/order/vip/chargrback?vtele=${vtele}&money=${value}`)
						.then((response) => {
							console.log(response);
							if(response.data.isOK) {
								this.$message({
									type: 'success',
									message: '扣款成功'
								});
								this.queryvip();
							}
						});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '取消输入'
					});
				});
			},
			update: function(vtele) {
				this.$prompt('新手机号', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
				}).then(({
					value
				}) => {
					this.$message({
						type: 'success',
						message: '新手机号为: ' + value
					});
					this.$http.get(`http://localhost:8080/OrderSystemServer/order/vip/updatetele?vtele=${vtele}&ntel=${value}`)
						.then((response) => {
							console.log(response);
							if(response.data.isOK) {
								this.$message({
									type: 'success',
									message: '更改成功'
								});
								this.queryvip();
							}
						});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '取消输入'
					});
				});
			}
		}
	}
</script>

<style>

</style>